<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .banxin{
            width: 300px;
            height: 500px;
            border: 1px solid black;
            margin: auto;

        }
        ul,li{
            /* border: 1px solid black; */
            color: blue;
            padding: 5px;

        }
        p{
        float: right;
        }
        *{
            padding: 0;
            margin: 0;

        }
        ul{
            list-style: none;
        }

    </style>
</head>
<body>
    <div class="banxin">
        <span>百度热搜</span>
        <p>换一换</p>
        <ul>
            <li></li>
        </ul>
    </div>
</body>
<script>
    var oBanxin=document.querySelector("banxin")
    var oUl=document.querySelector("ul")
    var oLi=document.querySelector("li")

 //设置数据的代码
 function setData(key,value){
    localStorage.setItem(key,JSON.stringify(value))
}

// 获取数据的代码
function getData(key){
    var data = localStorage.getItem(key);//根据key取出key对应的值
    // 如果有数据，就把它转为数组或者对象
    if (data) {
        return JSON.parse(data)
    } else { // 如果没有有数据，就把它转为空
        return []
    }
}

    var jsonarr = [
        { id: 1001, "product": "1.千里之行，始于足下。"},
        { id: 1002, "product": "2.精诚所至，金石为开。"},
        { id: 1003, "product": "3.天下兴亡，匹夫有责。"},
        { id: 1004, "product": "4.迅电流光，艺不压身。"},
        { id: 1005, "product": "5.老龟煮不烂，移祸于枯桑。"},
        { id: 1006, "product": "6.人无远虑，必有近忧。"},
        { id: 1007, "product": "7.文武之道，一张一弛。"},
        { id: 1008, "product": "8.二人同心，其利断金。"},
        { id: 1008, "product": "9.瓜田不纳履，李下不正冠。"},
        { id: 1008, "product": "10.千里之堤，毁于蚁穴。"},
        
    ]

    function render(jsonarr){
        var str=''
        jsonarr.forEach(item=>{
            str+=`
        
        <ul>
            <li>${item.product}</li>
        </ul>
    
            `
        })
        oUl.innerHTML=str

    }
    render(jsonarr)
</script>
</html>